<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>订单管理</title>
	<link rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}" />
</head>
<body class="pear-container">
<div class="layui-card">
	<div class="layui-card-body">
		<form class="layui-form" action="" autocomplete="off">
			<div class="layui-form-item">
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">订单编号</label>
					<div class="layui-input-inline">
						<input type="text" name="orderid" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
						<i class="layui-icon layui-icon-search"></i>
						查询
					</button>
					<button type="reset" class="pear-btn pear-btn-md">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
<!--		表格-->
		<table id="user-table" lay-filter="user-table"></table>
	</div>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>
<script type="text/html" id="user-bar">
	<a onclick="detail({{d.id}})" class="layui-btn layui-btn-xs">详情</a>
	{{#  if(d.orderStatus.id != 3 && d.orderStatus.id != 4){ }}
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消订单</a>
	{{#  } else { }}
	{{#  }}}

	{{#  if(d.orderStatus.id == 1){ }}
	<a class="layui-btn layui-btn-xs" lay-event="send">发货</a>
	{{#  } else { }}
	{{#  }}}
</script>


<script type="text/html" id="user-createTime">
	{{#  if(d.created !=null){ }}
	<div>{{layui.util.toDateString(d.created, 'yyyy-MM-dd')}}</div>
	{{#  } else {}}
	<div>{{}}</div>
	{{#  } }}
</script>

<script th:src="@{/static/resource/lib/jquery.min.js}"></script>
<script th:src="@{/static/component/layui/layui.js}"></script>
<script th:src="@{/static/component/pear/pear.js}"></script>
<script>

    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['80%', '80%'], //宽高
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" style="width: 40%;height: 40%" /></div>'
        });
    }
	layui.use(['table', 'form', 'jquery','common'], function() {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let common = layui.common;


		let cols = [
			[
				{
					title: '订单编号',
					field: 'id',
					sort: true,
					align: 'center',
					width: 110
				},
				{
					field: 'imgUrl',
					title: '商品图片',
					width: 110,
					templet: function(d){
						return '<div onclick="show_img(this)" ><img src="'+d.imgUrl+'" alt="" width="45px" height="45px"></a></div>';
					}
				},
				{
					title: '商品名称',
					field: 'goodsInfo',
					align: 'center',
					width: 140
				},
				{
					title: '商品参数',
					field: 'goodsParams',
					align: 'center',
					width: 140
				},
				{
					title: '数量',
					field: 'goodsCount',
					align: 'center',
					width: 115
				},
				{
					title: '总价格',
					field: 'singleGoodsMoney',
					align: 'center',
					sort: true,
					width: 130
				},
				{
					title: '订单状态',
					align: 'center',
					templet: '<div>{{createFormat(d.orderStatus.status)}}</div>',
					width: 140
				},
				{
					title: '下单时间',
					field: 'created',
					align: 'center',
					sort: true,
					width: 140,
					templet: '#user-createTime'
				},
				,
				{
					field:'right',
					title: '操作',
					width:220,
					align: 'center',
					toolbar:"#user-bar"
				}
			]
		]

		table.render({
			elem: '#user-table',
			url: '/pear/orderdata',
			page: true,
			cols: cols,
			skin: 'line',
			text: {none: '暂无订单信息'},
			defaultToolbar: [{
				title: '刷新',
				layEvent: 'refresh',
				icon: 'layui-icon-refresh',
			}, 'filter', 'print', 'exports']
		});

		table.on('tool(user-table)', function(obj) {
			if (obj.event === 'del') {
				window.del(obj);
			} else if (obj.event === 'send') {
				window.send(obj);
			}
		});

		window.send = function(obj) {
			layer.confirm('确定要发货？', {
				icon: 3,
				title: '提示'
			}, function(index) {
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: "/pear/sendGoods/"+obj.data['id'],
					dataType: 'json',
					type: 'GET',
					success: function(result) {
						layer.close(loading);
						if (result.success) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							}, function() {
								table.reload('user-table');
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
					}
				})
			});
		}


		window.del = function(obj) {
			layer.confirm('确定要取消该订单', {
				icon: 3,
				title: '提示'
			}, function(index) {
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: "/pear/cancelOrder/"+obj.data['id'],
					dataType: 'json',
					type: 'GET',
					success: function(result) {
						layer.close(loading);
						if (result.success) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							}, function() {
								table.reload('user-table');
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
					}
				})
			});
		}


		form.on('submit(user-query)', function(data) {
			table.reload('user-table', {
				where: data.field
			})
			return false;
		});

		window.refresh = function(param) {
			table.reload('user-table');
		}


	})

	//解决layui的field获取属性中的类中的属性无法显示问题
	function createFormat(obj) {

		return obj;
	}


	function detail(orderid)
	{
		layer.open({
			type: 2,
			title: '订单详情',
			shade: 0.1,
			area: ['500px', '400px'],
			content: '/pear/toOrderInfo/'+orderid
		});
	}


</script>
</body>
</html>
